<template>
    <div>
        <el-form v-if="switchValue" :inline="true" :model="roleForm" class="demo-form-inline">
            <el-form-item label="角色名称">
                <el-input size="mini" v-model="roleForm.text" placeholder="角色名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="queryRole">查询</el-button>
            </el-form-item>
        </el-form>
        <slot>角色列表</slot>
        <el-table
            :data="tableData"
            height="420"
            highlight-current-row
            @row-click="currentRoleClick"
            @current-change="currentRoleChange"
            style="width: 100%">
            <el-table-column  prop="id" label="角色编码"></el-table-column>
            <el-table-column prop="text" label="角色姓名" ></el-table-column>
            
            <el-table-column fixed="right" label="操作" width="180" v-if="switchValue">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="addRoleEmp">新增人员</el-button>
                <el-button type="text"  size="small" @click="removeRoleEmp">删除人员</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            small
            layout="sizes,prev, pager, next,total"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            @current-change="currentPageChange"
            @size-change="handleSizeChange"
            :total="page.total">
        </el-pagination>

        <!--添加人员-->
        <el-dialog
            title="人员维护"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="dialogHandleClose">
            <addUserToRole ref="addUserToRole" v-model="curRoleRow" :curRoleRow="curRoleRow"></addUserToRole>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="saveAdd()" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <!--删除人员-->
        <el-dialog
            title="人员移除"
            :visible.sync="dialogDelVisible"
            width="60%">
            <removeUserToRole ref="removeUserToRole"></removeUserToRole>
        </el-dialog>
    </div>
</template>
<script>
import request from "../../../../../utils/request.js";
import addUserToRole from "./addUserToRole.vue";
import removeUserToRole from "./removeUserToRole.vue";
export default {
    components:{
        addUserToRole,
        removeUserToRole
    },
    data() {
      return {
        roleForm: {
            text: ''
        },
        page:{
            total:10,
            pageSize:5,
            curPageNum:1
        },
        tableData:[],
        curRoleRow:{},
        curUserRow:{},
        dialogVisible:false,
        dialogDelVisible:false
      }
    },
    //父节点传递下来的值
    props:{
        switchValue:{
            type:Boolean
        }
    },
    methods: {
      currentPageChange(val){
        console.log("currentPageChange",val);
        this.page.curPageNum = val;
        this.$options.methods.queryRole.bind(this)();
      },
      handleSizeChange(val){
        console.log("handleSizeChange",val);
        this.page.pageSize = val;
        this.$options.methods.queryRole.bind(this)();
      },
      queryRole(){
        const that = this;
        if(this.switchValue){
            var queryData = {"pageSize":this.page.pageSize,"curPageNum":this.page.curPageNum,"text":this.roleForm.text};
            request.post("/system/query/queryRole",queryData).then(function(res){
                that.tableData = res.data.list;
                that.page.total = res.data.total;
            });
        }else{
            var queryData = {"pageSize":this.page.pageSize,"curPageNum":this.page.curPageNum,"empcode":this.curUserRow.empcode};
            request.post("/system/query/queryRole",queryData).then(function(res){
                that.tableData = res.data.list;
                that.page.total = res.data.total;
            });
        }
        
      },
      //当前行变化
      currentRoleChange(row){
        if(this.switchValue){
            this.curRoleRow = row;
        }else{
            this.curRoleRow = {};
        }
      },
      //当前行点击事件
      currentRoleClick(){
        if(this.switchValue){
            this.$bus.$emit("loadUserList",this.curRoleRow);
        }
      },
      //添加人员弹出框
      addRoleEmp(){
       this.dialogVisible = true;
      },
      //移除角色人员
      removeRoleEmp(){
        this.dialogDelVisible = true;
        this.$bus.$emit("loadUserList",this.curRoleRow);
      },
      //保存角色人员添加信息
      saveAdd(){
        const that = this;
        var selectUsers = this.$refs["addUserToRole"].getValue();
        var users = [];
        for(var i=0;i<selectUsers.length;i++){
            users.push({"empcode":selectUsers[i],"roleid":this.curRoleRow.id});
        }
        if(users.length==0){
            return;
        }
        request.post("/system/db/insertUserRoleBatch",users).then(function(res){
            if(res.data.retCode=="200"){
                that.$Alert({message: res.data.message,type: 'success'});
            }else{
                that.$Alert({showClose: true,message: res.data.message,type: 'error'});
            }
            
        });
        this.dialogVisible = false;
      },
      dialogHandleClose(){

      }
    },
    mounted(){
        this.$options.methods.queryRole.bind(this)();
        this.$bus.$on("loadRoleList",(curUserRow)=>{
            this.curUserRow = curUserRow;
            this.$options.methods.queryRole.bind(this)();
        })
    }
}    
</script>